<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>商品添加</title>
    <meta name="description" content="Neat">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/productSave_style.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="${pageContext.request.contextPath}/admin/js/productSave_style.js"></script>
    <%--下拉框的样式--%>
    <style>
        #select{width: 260px;height: 29px; line-height: 25px; border-radius: 5px; border:1px solid #ccc; font-size: 12px; padding:0 10px; position: relative;}
        #select i{width: 0; height: 0; border-top: 5px solid #333; border-left: 5px solid transparent;  border-right: 5px solid transparent;
            position: absolute; top: 10px; right: 10px;}
        #select span{display: block !important; height: 25px; cursor: pointer;}
        #select ul,#select li{padding: 0; margin:0 }
        #select li{line-height: 30px; color: #666; list-style-type: none; border-bottom: 1px dashed #eee; cursor: pointer;transition: all 1s ease 0s;}
        #select li:hover{ border-bottom: 1px solid #51A6FF; background-color: #DAF0FF; padding-left: 20px; font-weight: bold; }
        #select li:last-child{border-bottom: 0}
        #select ul{display: none;}
        .flipx { transform: rotateY(180deg); }
    </style>
    <script src="${pageContext.request.contextPath}/admin/js/jquery-3.3.1.min.js.js"></script>
    <%--下拉框的js--%>
    <script>
        $(function(){
            $(".checkspan").bind("click",function(){
                $('.select li').click(function(){
                    $(this).attr('class','on');
                });
                var ul = $(this).siblings('ul')
                if(ul.is(":hidden")){
                    ul.slideDown('400', function() {
                        $(this).find("li").bind("click",function(){
                            var selectLi=$(this).text();
                            $("#select span").text(selectLi);
                            $("#select ul").slideUp(400);
                            //Jquery和JS获取ul中li标签的值以及赋值问题,麻烦，三个都要写。
                            $("#orderBy").html($(this).html());
                            //取当前选中 li 的value值
                            var orderColumn = $(this).attr("value");
                            //赋到input标签 选择器id="orderColumn"
                            $("#orderColumn").val($(this).attr("value"));
                        })
                        ul.mouseleave(function() {
                            $('#select ul').slideUp(400)
                        });
                    });
                }else{
                    $(this).siblings('ul').slideUp(400)
                }
            })
        })
    </script>
</head>
<body>
<div class="main-group">
    <div class="box-group">
        <div class="left-group">
            <h3 class="title">封面浏览处</h3>
            <div class="icon-group">
                <img id="pic" style="width: 140px;height: 155px;margin-bottom: 30px;" src="${product.productPicture}">
            </div>
        </div>
        <div class="right-group">
            <h3 class="title">商品添加</h3>
            <div style="width: 300px;margin: 0 auto;text-align: center;color: red">${msg}</div>
            <form action="/admin/updateProduct" method="post" class="form" >
                <div class="form-group">
                    <div class="input-group w50">
                        <input type="text" name="productName" value="${product.productName}" required>
                        <span>商品名称</span>
                    </div>
                    <div id="select">
                        <i></i>
                        <input type="hidden" id="orderBy" value="${orderBy}">
                        <input type="hidden" id="orderColumn" name="classify" value="${orderColumn }">
                        <span class="checkspan" id="spanShow">请选择商品类别</span>
                        <ul required >
                            <c:forEach items="${list}" var="item">
                                <li value="${item.classifyId}" <c:if test="${item.classifyId==product.classifyId}">check</c:if>>${item.classifyName}</li>
                            </c:forEach>
                            <li></li>
                        </ul>
                    </div>
                    <div class="input-group w50">
                        <input type="text" name="productNumber" value="${product.productAllnumber}" required>
                        <span>商品数量</span>
                    </div>
                    <div class="input-group w50">
                        <input type="text" name="" style="display: none">
                        <span style="display: none">隐藏的</span>
                    </div>
                    <div class="input-group w50">
                        <input type="text" name="productPrice" value="${product.productPrice}" required>
                        <span>商品价格</span>
                    </div>
                    <div class="input-group w50">
                        <input type="text" name="" style="display: none">
                        <span style="display: none">隐藏的</span>
                    </div>
                    <div>
                        <span>商品封面</span>
                        <div class="input-group w50">
                            <input name="file" size="50" type="file" onchange="upload(this)" required>
                        </div>
                    </div>
<%--                    <img id="pic" style="display: none;width: 160px;height: 90px;margin-bottom: 30px;">--%>
<%--                    <div id="div1">--%>
                    <div class="input-group w50">
                        <input type="text" name="" style="display: none">
                        <span style="display: none">隐藏的</span>
                    </div>
                    <div class="input-group w100">
                        <textarea name="productParticulars" required>${product.productParticulars}</textarea>
                        <span>商品详情</span>
                    </div>

<%--                    <input id="content" type="hidden" name="content" value="">--%>
                    <input id="poster" type="hidden" name="poster" value="${product.productPicture}">
                    <input id="id" type="hidden" name="id" value="${product.productId}">

                    <div class="input-group w100">
                        <button type="submit">提 交</button>
                    </div>
                </div>
<%--                    <button type="submit">提 交</button>--%>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    //上传封面图片
    function upload(e){
        let pic = e.files[0];
        let form = new FormData();
        form.append("file",pic);

        let xhr = new XMLHttpRequest();
        xhr.open("post","${pageContext.request.contextPath}/common/upload");
        xhr.send(form);
        xhr.onreadystatechange = function (){
            if(xhr.readyState==4&&xhr.status==200){
                //将服务上传成功的返回字符串转成JSON
                let result = JSON.parse(xhr.responseText);
                //获取服务器返回的图片地址
                let url = result.data[0].url
                //获取显示封面的img标签
                let img = document.getElementById("pic");
                //修改img的样式，让img显示
                img.style.display = "block";
                //修改img的地址，让封面图片显示
                img.src = url;
                //将服务器返回的图片地址写入的表单隐藏域中
                document.getElementById("poster").value = url;
            }
        }
    }
</script>
